<script setup>
import { computed, ref } from 'vue'

const age = ref(18)

// 写法1：计算出新结果(常见写法，传入函数)
const nextAge = computed(() => {
  return age.value + 1
})

// 写法2：能计算出新结果，还能修改(带set的写法，传入对象结构)
const nextAge2 = computed({
  get() {
    return age.value + 2
  },
  set(val) {
    age.value = val - 2
  },
})
</script>

<template>
  <div>我今年的年纪 <input type="text" v-model.number="age" /></div>
  <div>我明年的年龄 {{ nextAge }}</div>
  <div>我后年的年龄 <input type="text" v-model.number="nextAge2" /></div>
</template>
